<template>
  <div>
    <el-drawer
      v-model="drawer"
      :title="title"
      :size="size"
      :close-on-click-modal="false"
    >
      <div class="box">
        <div class="content">
          <slot />
        </div>
        <div class="btn">
          <el-button type="primary" @click="submit() , close()">{{ commitText }}</el-button>
          <el-button type="primary" @click="close">取消</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref } from "vue";

const drawer = ref(false);

const emits = defineEmits(["submit"]);

const submit = () => {
  emits("submit");
};

// 接收属性
defineProps({
  title: {
    type: String,
    default: "",
  },
  size: {
    default: "45%",
  },
  commitText: {
    type: String,
    default: "提交",
  },
  showBtn: {
    type: Boolean,
    default: true,
  },
});
//打开抽屉盒子
const open = () => {
  drawer.value = true;
};
//关闭抽屉盒子
const close = () => {
  drawer.value = false;
};

// 将属性方法暴露出去，提供给父组件使用
defineExpose({
  open,
  close,
});
</script>

<style lang="less" scoped>
::-webkit-scrollbar {
  display: none;
}
.box {
  width: 100%;
  height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .content {
    height: 80%;
    overflow-y: scroll;
  }
  .btn {
    display: flex;
    justify-content: center;
  }
}
</style>
